<template>
  <div class="goods_area" v-if="this.dataSoures">
    <div class="item_block" v-for="(item, index) of this.dataSoures" :key="index">

      <div class="left" @click="typeIsPreview!='preview' || newTypeIsPreview =='newPreview' ?goToDetail(item):''">
        <img :src="item.picture?item.picture: 'https://image.hezongyy.com/images/no_picture.gif'  " />
        <img class="tip" v-if="item.quantity <= 0" src="https://image.hezongyy.com/pcimage/119h5/ysq.png" />
        <div class='goodsTagList' v-if="item.goodsLabelVoList&&item.goodsLabelVoList.activityTag">
          <div class='goodsTag' v-for="(i,index) of item.goodsLabelVoList.activityTag" :key="index">
            <img :src="i.imgUrl" alt="">
          </div>
        </div>
        <div class='label_info' v-if="showLabel(item.label)">
          <div class='left_text'>
            <div class='text' v-if="!item.giftPrice">{{getLabelText(item.label)}}</div>
            <div class='text_and_price' v-if="item.giftPrice">
              <div class='text'>{{getLabelText(item.label)+'价'}}</div>
              <div class='price'>￥{{item.giftPrice}}</div>
            </div>
          </div>
          <div class='right_text'>
            <div class='text'>{{item.giftDesc}}</div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="text1">{{ item.name }}</div>
        <div class='label_img' v-if="item.nationalDrugCode">
          <img class='img2' src="https://image.hezongyy.com/pcimage/119h5/h5_gjm_new.png" alt="">
        </div>
        <div class='label_img' v-for="(labelId, index) of item.label" :key="index" v-show="getLabelImg(labelId)">
          <img class='img1' :src="getLabelImg(labelId)" />
        </div>
        <div class="text2">{{ item.manufacturerName }}</div>
        <div class="text2">规格：{{ item.specification }}</div>
        <div class="text2">效期：{{ item.expirationDate }}</div>
        <div class='text2' v-if='item.goodsPriceStruct.ordinaryRestrictType!=0'>限购：{{item.maxBuyNumber}}</div>

        <!-- <div class="text2" v-if="item.quantity <= 0">
          <span style="color:#F34444">库存：缺货</span>
        </div>
        <div class="text2" v-if="item.quantity > 0">
          库存：{{ item.quantity > 800 ? "充裕" : item.quantity }}
        </div> -->
        <!-- //多个优惠券 取数组第0项里面的值 -->
        <div class="text3" v-if="couponType=='coupons'&&typeIsPreview!='preview'">
          <span class="num">{{ setPrice.setPrice(item.sellingPrice)}}</span>
          <span class="num1" v-show="item.sellingPrice != -1">¥{{ item.retailPrice }}</span>
          <span class="btn">
            <img v-if="item.sellingPrice==-1||item.quantity <= 0" src="@/assets/image/jiagou1.png" />
            <img v-else @click="showCards(item)" src="@/assets/image/jiagou.png" />
          </span>
          <div class="couponAfterPrice" v-if="
                    item.sellingPrice != -1 &&
                      item.tieredPricingRules[0] &&
                      item.tieredPricingRules[0].priceFloor > 0 &&
                      item.tieredPricingRules[0].priceCeil > 0
                  ">
            券后 {{ "¥" + item.tieredPricingRules[0].priceFloor }}-{{
                    "¥" + item.tieredPricingRules[0].priceCeil
                  }}
          </div>
          <div class="couponAfterPrice" v-if="
                    item.sellingPrice != -1 &&
                      item.tieredPricingRules[0] &&
                      item.tieredPricingRules[0].priceFloor == 0 &&
                      item.tieredPricingRules[0].priceCeil > 0 
                  ">
            券后{{ "¥" + item.tieredPricingRules[0].priceCeil }}
          </div>
        </div>
        <!-- //单个优惠券 取外面的值 -->
        <div class='text3' v-if="couponType=='coupon'&&typeIsPreview!='preview' && newTypeIsPreview!='newPreview'">
          <span class='num'>{{setPrice.setPrice(item.sellingPrice)}}</span><span class='num1' v-show="item.sellingPrice!=-1">¥{{item.retailPrice}}</span>
          <span class="btn">
            <img v-if="item.sellingPrice==-1||item.quantity <= 0" src="@/assets/image/jiagou1.png" />
            <img v-else @click="showCards(item)" src="@/assets/image/jiagou.png" />
          </span>
          <div class='couponAfterPrice' v-if="item.priceFloor&&item.priceCeil&&item.sellingPrice!=-1">
            券后 {{'¥'+item.priceFloor}}-{{'¥'+item.priceCeil}}
          </div>
          <div class='couponAfterPrice' v-if="!item.priceFloor&&item.priceCeil&&item.sellingPrice!=-1">
            券后{{'¥'+item.priceCeil}}
          </div>
        </div>
        <!-- 预告商品则不显示  并且显示预览价格 -->
        <div class='text3' v-if="typeIsPreview=='preview'">
          <span class='num'><span class='text' v-if="item.sellingPrice>0">预览价</span>{{setPrice.setPrice(item.sellingPrice)}}</span><span class='num1'>¥{{item.retailPrice}}</span>
          <!-- <div class='couponAfterPrice' v-if="item.couponFloorPrice&&item.couponCeilingPrice">
            券后 {{'¥'+item.couponFloorPrice}}-{{'¥'+item.couponCeilingPrice}}
          </div>
          <div class='couponAfterPrice' v-if="!item.couponFloorPrice&&item.couponCeilingPrice">
            券后{{'¥'+item.couponCeilingPrice}}
          </div> -->
        </div>
        <!-- 有预览价格，也可以加购 -->
        <div class='text3' v-if="newTypeIsPreview =='newPreview'">
          <!-- <span class='num'><span class='text' v-if="item.sellingPrice>0">预览价</span>{{setPrice.setPrice(item.sellingPrice)}}</span><span class='num1'>¥{{item.retailPrice}}</span> -->
          <span class="btn">
            <img v-if="item.sellingPrice==-1||item.quantity <= 0" src="@/assets/image/jiagou1.png" />
            <img v-else @click="showCards(item,1)" src="@/assets/image/jiagou.png" />
          </span>
          <div class='couponAfterPrice' v-if="item.priceFloor&&item.priceCeil&&item.sellingPrice!=-1">
            券后 {{'¥'+item.priceFloor}}-{{'¥'+item.priceCeil}}
          </div>
          <div class='couponAfterPrice' v-if="!item.priceFloor&&item.priceCeil&&item.sellingPrice!=-1">
            券后{{'¥'+item.priceCeil}}
          </div>
        </div>
      </div>
    </div>
    <div class="null_goods" v-if="typeIsPreview!='preview'&&this.dataSoures.length == 0">
      <img src="https://image.hezongyy.com/pcimage/119h5/07.png" />
      <div class="text">暂无活动商品~</div>
    </div>
    <div class='null_goods1' v-if="typeIsPreview=='preview'&&this.dataSoures.length==0">
      <img src="https://image.hezongyy.com/pcimage/119h5/07.png">
      <div class='text'>暂无预告商品~</div>
      <div class='text_desc' v-if="previewBanner&&previewBanner.length>0&&dataSoures.length==0">{{previewBanner[0].desc}}</div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    typeIsPreview: {
      // 标识 预览商品 还是正常商品
      type: [String],
      default: '',
    },
    // 新的标识 有预览商品
    newTypeIsPreview: {
      type: [String],
      default: '',
    },
    dataSoures: {
      default: ''
    },
    previewBanner: [],
    couponType: {
      //优惠券取值标识  coupon 单个优惠券 去外面值 coupons多个优惠券 取数组第0个
      type: [String],
      default: '',
    },
  },
  data() {
    return {}
  },
  mounted() {},
  methods: {
    //阶梯价跳转原生详情页面
    goToDetail(item) {
      window.location.href =
        this.pathURL + 'nativeApp/goodsDetails?id=' + item.id
    },
    load() {
      this.$emit('load')
    },
    showCards(item , isPreviewNum) {
      if (isPreviewNum  == 1) {
        let itemPreview = item
        // 添加是否是 预览可以加购
        this.$set(itemPreview, 'isPreview', 1)
        this.$emit('showCards', itemPreview)
      }else{
        this.$emit('showCards', item)
      }
    },
    //集采标识显示
    getLabelImg(labelId) {
      if (labelId == 21)
        return 'https://image.hezongyy.com/pcimage/119h5/h5_cj_new.png'
      if (labelId == 8)
        return 'https://image.hezongyy.com/pcimage/119h5/h5_jm_new.png'
      if (labelId == 6)
        return 'https://image.hezongyy.com/pcimage/119h5/h5_jp_new.png'
      if (labelId == 24)
        return 'https://image.hezongyy.com/pcimage/119h5/h5_yx_new.png'
    },
    //买赠换购标识
    getLabelText(labelId) {
      for (let i of labelId) {
        if (i == 17) {
          return '换购'
        }
        if (i == 4) {
          return '买赠'
        }
      }
    },
    //显示label标签
    showLabel(labelId) {
      for (let i of labelId) {
        if (i == 17 || i == 4) {
          return true
        } else {
          return false
        }
      }
    },
  },
}
</script>
<style lang="less" scoped>
.couponAfterPrice {
  text-align: center;
  width: 305px;
  height: 36px;
  line-height: 36px;
  opacity: 1;
  background: #ff540d;
  border-radius: 22px;
  color: #fff;
  padding: 2px 0;
  overflow: hidden;
  font-family: PingFangSC, PingFangSC-Regular;
  margin-top: 5px;
}

.label_img {
  display: table-cell;
  width: 48px;
  height: 37px;
  line-height: 37px;
  padding-right: 16px;
  .img1 {
    width: 100%;
    height: 100%;
  }
  .img2 {
    width: 106px;
    height: 100%;
  }
}

.goods_area {
  width: 100%;
  height: 100%;
  opacity: 1;
  background: #ffffff;
  overflow: auto;
  box-sizing: border-box;

  .item_block {
    display: flex;
    height: 384px;
    line-height: 384px;
    margin: 0 24px 0 24px;
    border-bottom: 1px solid #d8d8d8;
    .left {
      // background: red;
      display: inline-block;
      height: 280px;
      margin: 52px 21px 52px 0;
      opacity: 1;
      border-radius: 8px;
      position: relative;
      width: 280px;
      .goodsTagList {
        position: absolute;
        top: -186px;
        left: 0;
        z-index: 99;
        height: 280px;
        .goodsTag {
          img {
            width: 100px;
            height: 38px;
          }
        }
      }

      .label_info {
        display: flex;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        .left_text {
          width: 118px;
          height: 66px;
          background: #fee471;
          border-radius: 0px 0px 0px 8px;
          text-align: center;
          .text {
            height: 66px;
            font-size: 28px;
            font-family: PingFang-SC-Regular, PingFang-SC;
            font-weight: 400;
            color: #fc3d32;
            line-height: 66px;
          }
          .text_and_price {
            height: 66px;
            line-height: 66px;
            .text {
              width: 100%;
              height: 32px;
              font-size: 24px;
              font-family: PingFang-SC-Regular, PingFang-SC;
              font-weight: 400;
              color: #fc3d32;
              line-height: 32px;
              padding-top: 2px;
            }
            .price {
              width: 100%;
              height: 32px;
              font-size: 24px;
              font-family: PingFang-SC-Medium, PingFang-SC;
              font-weight: 500;
              color: #fc3d32;
              line-height: 32px;
            }
          }
        }
        .right_text {
          flex: 1;
          margin-top: 8px;
          height: 58px;
          background: #fc3b32;
          border-radius: 0px 0px 8px 0px;
          .text {
            width: 100%;
            height: 56px;
            font-size: 20px;
            font-family: PingFang-SC-Medium, PingFang-SC;
            font-weight: 500;
            color: #fff;
            line-height: 28px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2; //超出1行
            -webkit-box-orient: vertical;
            box-sizing: border-box;
            padding: 4px;
          }
        }
      }

      .tip {
        z-index: 9;
        position: absolute;
        width: 130px;
        height: 130px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        img {
          border: none;
          display: inline-block;
          width: 100%;
          height: 100%;
        }
      }

      img {
        width: 100%;
        height: 100%;
      }
    }

    .right {
      margin: 20px 0 20px 0;
      width: 59%;
      height: 280px;

      .text1 {
        overflow: hidden;
        height: 34px;
        opacity: 1;
        font-size: 32px;
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        text-align: left;
        color: #333333;
        line-height: 50px;
        padding-bottom: 22px;
      }
      .text2 {
        padding-bottom: 3px;
        overflow: hidden;
        height: 37px;
        opacity: 1;
        font-size: 26px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: left;
        color: #666666;
        line-height: 37px;
      }

      .text3 {
        position: relative;
        height: 37px;
        line-height: 37px;
        margin-top: 10px;

        .num {
          height: 35px;
          line-height: 35px;
          width: auto;
          opacity: 1;
          font-size: 32px;
          font-family: PingFang, PingFang-Medium;
          font-weight: 500;
          text-align: left;
          color: #f34444;
          padding-right: 15px;
        }

        .num1 {
          width: auto;
          opacity: 1;
          font-size: 26px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          text-decoration: line-through;
          text-align: left;
          color: #999999;
          height: 37px;
          line-height: 37px;
        }

        .btn {
          position: absolute;
          right: 24px;
          bottom: -5px;
          display: inline-block;
          height: 60px;
          width: 60px;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}
.null_goods {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 426px;
  height: 399px;

  img {
    width: 100%;
    height: 100%;
  }

  .text {
    width: auto;
    height: 39px;
    opacity: 1;
    font-size: 28px;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    text-align: CENTER;
    color: #000000;
  }
}
.null_goods1 {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 426px;
  height: 399px;
  // margin-top: .2rem;

  img {
    width: 100%;
    height: 100%;
  }

  .text {
    width: auto;
    height: 39px;
    opacity: 1;
    font-size: 28px;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    text-align: CENTER;
    color: #000;
  }

  .text_desc {
    margin-top: 38px;
    width: auto;
    height: 42px;
    opacity: 1;
    font-size: 32px;
    font-family: Microsoft YaHei, Microsoft YaHei-Bold;
    font-weight: 700;
    text-align: center;
    color: #ff540d;
  }
}
</style>